<template>
	<div class="auth-check">
		<el-button
			size="small"
			v-if="isLunbo && authorize !== 1"
			@click="onCheckAuth"
			type="primary"
			>编辑</el-button
		>
		<el-dialog
			title="权限验证"
			:visible.sync="dialogVisible"
			width="385px"
			append-to-body
			:close-on-click-modal="false"
		>
			<el-form
				ref="form"
				size="small"
				:model="form"
				:rules="rules"
				label-width="100px"
			>
				<el-form-item label="用户名:" prop="username">
					<el-select v-model="form.username" placeholder="请输入用户名">
						<el-option
							v-for="item in userList"
							:key="item.id"
							:label="item.userName"
							:value="item.userName"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="密码:" prop="password">
					<el-input
						v-model="form.password"
						placeholder="请输入密码"
						style="width: 220px"
						type="password"
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" size="small" @click="submitForm"
					>确 定</el-button
				>
				<el-button @click="cancel" size="small">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { getUserList, authorize } from "@/api/modules/user";
export default {
	components: {},
	props: {},
	data() {
		return {
			dialogVisible: false,
			userList: [],
			form: {
				username: "",
				password: "",
			},
			rules: {
				username: [
					{
						required: true,
						message: "请选择用户名",
						trigger: "change",
					},
				],
				password: [
					{
						required: true,
						message: "请输入密码",
						trigger: "change",
					},
				],
			},
		};
	},
	watch: {},
	computed: {
		authorize() {
			return this.$store.state.userInfo.authorize;
		},
		isLunbo() {
			if (this.$route.name == "lunbo") {
				return false;
			} else {
				return true;
			}
		},
	},
	created() {},
	mounted() {
		this.$store.dispatch("GetInfo");
	},
	methods: {
		onCheckAuth() {
			getUserList().then((res) => {
				this.userList = res.data;
				this.dialogVisible = true;
			});
		},
		submitForm() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					authorize(this.form).then((res) => {
						if (res.code === 200) {
							this.dialogVisible = false;
							this.$store.dispatch("GetInfo");
						}
					});
				}
			});
		},
		cancel() {
			this.dialogVisible = false;
		},
	},
};
</script>

<style lang="scss" scoped>
.auth-check {
	display: inline-block;
	margin-right: 10px;
}
</style>
